<template>
  <div class="flex flex-col items-center p-5 min-h-screen">
    <a-breadcrumb class="flex items-center mb-5" v-if="items.length > 0">
      <home-outlined />
      <span>当前位置:&nbsp;&nbsp;</span>
      <a-breadcrumb-item>
        <a href="/Agriculture/ASL/public" class="text-blue-500 hover:underline">首页</a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/Policie" class="text-blue-500 hover:underline">政策法规</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/Policie/Animal" class="text-blue-500 hover:underline">动物检疫</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item v-if="items.length > 0">{{ items[0].name }}</a-breadcrumb-item>
    </a-breadcrumb>

    <div class="bg-white w-full max-w-9xl p-6 custom-shadow custom-shadow rounded-lg" v-if="items.length > 0">
      <h1 class="text-2xl font-bold text-center mb-4">{{ items[0].name }}</h1>
      <p class="text-center text-gray-600 mb-4">{{ items[0].time }}</p>
      <hr class="mb-4" />
      <h2 class="text-lg font-semibold mb-2">详细内容</h2>
      <p class="text-gray-700 mb-4">{{ items[0].description }}</p>
      <p class="text-gray-700">来源: <a :href="items[0].url" class="text-blue-500 hover:underline">{{ items[0].url }}</a></p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import { HomeOutlined } from "@ant-design/icons-vue";
import { baseURL } from '../apis/homeAPI';

const route = useRoute();
const items = ref([]);

const fetchItem = async (id: string) => {
  try {
    const response = await axios.get(baseURL + `/api/animal-quarantines/${id}/?populate=*`);
    const data = response.data.data.attributes;

    items.value = [{
      name: data.name,
      url: data.url,
      time: data.time,
      description: data.description
    }];
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

onMounted(() => {
  const id = route.params.id as string;
  fetchItem(id);
});
</script>

<style scoped>
.custom-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
